<!-- 权限管理 -->
<template>
  <div class="roleand">
    <div class="institutions">
      <i class="iconfont">&#xe62e;</i>
      <p class="tissue">权限管理</p>
      <!-- 搜索模块 -->
      <div class="roleand-query">
        <el-input
          v-model="input"
          prefix-icon="el-icon-search"
          placeholder="默认展示部分用户，可以搜索更多用户"
          style="width:260px; margin-right: 10px;"
          size="mini"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" size="mini">搜索</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="Addedroler" size="mini">新增权限</el-button>
      </div>
    </div>
    <!-- 表格模块 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 98%;margin-left: 1%;margin-top: 10px;"
      row-key="id"
      tooltip-effect="dark"
      border
      v-loading="loading"
      max-height="355"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column prop="status" label="启用状态" :formatter="stateStart" align="center"></el-table-column>
      <el-table-column prop="value" label="权限值" align="center"></el-table-column>
      <el-table-column prop="icon" label="图标" align="center"></el-table-column>
      <el-table-column prop="type" label="权限类型" :formatter="stateFormat" align="center"></el-table-column>
      <el-table-column prop="uri" label="前端资源路径" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" :formatter="dateFormat" align="center"></el-table-column>
      <el-table-column prop="sort" label="排序" sortable align="center"></el-table-column>
    </el-table>
    <div class="rolenand-bottom">
      <div style="flex:2;margin-top: 15px;margin-left: 10px;">
        <el-button @click="toggleSelection()">取消选择</el-button>
        <el-button icon="el-icon-delete" @click="Batchdelete">批量删除选权限</el-button>
      </div>
      <!-- 分页 -->
      <div class="haidun-paging">
        <el-pagination
          background
          layout="prev, pager, next, sizes"
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          :pager-count="totalPage"
          @current-change="authority"
          @next-click="authority"
          @size-change="handleSizeChange"
          :page-sizes="[5, 10, 20, 30]"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      pageNum: "", // 当前页数
      pageSize: "", // 每页显示条目个数
      total: "", // 总条目数
      totalPage: "", // 总页数
      input: "",
      tableData: [],
      loading: true, // 数据懒加载动画
      multipleSelection: [] // 最终选中项
    };
  },
  watch: {},
  computed: {},
  methods: {
    authority(num) {
      this.pageNum = num;
      var paging = {
        pageNum: num,
        pageSize: this.pageSize
      };
      this.$store
        .dispatch("Management", paging)
        .then(data => {
          this.tableData = data.list;
          this.loading = false;
          this.total = data.total;
          this.pageSize = data.pageSize;
          this.pageNum = data.pageNum;
          this.totalPage = data.totalPage;
        })
        .catch(error => {
          console.log("请求失败：" + error);
        });
    },
    // 点击批量删除权限
    Batchdelete() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "你还没有勾选内容，请勾选",
          type: "warning"
        });
      } else {
        this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: false
        })
          .then(() => {
            // row.splice(index, 1);
            var permissiondelete = {
              ids: this.multipleSelection
            };
            this.$store
              .dispatch("Permissionsdelete", permissiondelete)
              .then(data => {
                this.authority(1);
              });
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    // 点击新增权限
    Addedroler() {
      this.$router.push({ name: "additional" });
    },
    // 取消选中
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      this.multipleSelection = val.map(function(v) {
        return v.id;
      });
      console.log("val: " + JSON.stringify(this.multipleSelection));
    },
    // 权限类型
    stateFormat(row, column) {
      switch (row.type) {
        case 0:
          return "目录";
          break;
        case 1:
          return "菜单";
          break;
        case 2:
          return "按钮";
          break;
        default:
      }
    },
    // 调整每页页数
    handleSizeChange(val) {
      this.pageSize = val;
      this.authority(this.pageNum);
    },
    // 启用状态
    stateStart(row, column) {
      if (row.status == 0) {
        return "禁用";
      } else if (row.status == 1) {
        return "启用";
      }
    },
    //时间格式化
    dateFormat: function(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD");
    }
  },
  created() {
    this.authority(1);
  },
  mounted() {}
};
</script>
<style scoped>
.roleand {
  margin-top: 20px;
}
.institutions {
  position: relative;
  height: 30px;
  display: flex;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.tissue {
  font-size: 14px;
  font-weight: bold;
  margin-left: 5px;
}
.roleand-query {
  position: absolute;
  right: 20px;
  top: 10px;
}
/* 分页 */
.haidun-paging {
  margin-top: 15px;
}
.rolenand-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>